<table class="table">
  <thead>
  <tr>
    <th>商品名称</th>
    <th>成交价格</th>
    <th>成交时间</th>
    <th>订单状态</th>
    <th>操作</th>
  </tr>
  </thead>
  <tbody>
  <tr *ngFor="let order of pagedData; let idx=index">
    <td><a [routerLink]="['/auc-item',order.id]">{{order.name}}</a></td>

    <td>¥ {{order.price|number:'1.2-2'}}</td>
    <td>{{order.createAt|date}}</td>
    <td>{{order.status|orderStatus}}</td>
    <td>
      <a *ngIf="order.status==0" (click)="onAuctionConfirm(order)">确认收货地址</a>
      <a *ngIf="order.status==1" (click)="onPay(order)">支付</a>
      <a *ngIf="order.status==4" (click)="onReceiveConfirm(order)">确认收货</a>
      <a *ngIf="order.status==4" (click)="orderDetail(idx)">详细</a>
    </td>
  </tr>
  </tbody>
</table>

<pager *ngIf="data.length" [data]="data" [pageSize]="pageSize" (pagedDataChange)="onPagedDataChange($event)"></pager>


<div bsModal #auctionConfirmModal="bs-modal" class="modal fade" tabindex="-1" role="dialog"
     aria-labelledby="myLargeModalLabel"
     aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" (click)="auctionConfirmModal.hide()" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
        <h4 class="modal-title">订单确认</h4>
      </div>
      <div class="modal-body">

        <div class="address-management">
          <div class="header">选择收货地址 <i class="fa fa-bicycle"></i></div>
          <table class="table">
            <thead>
            <tr>
              <th class="edit-selected">选择</th>
              <th>详细地址</th>
              <th>收货人</th>
              <th>收货电话</th>
              <th class="default">默认收货地址</th>
            </tr>
            </thead>
            <tbody>
            <tr *ngFor="let address of addressList;let idx=index">
              <td><input type="radio" name="radioGroup" (click)="setSelectedAddressIdx(idx)"
                         [attr.checked]="address.isDefault?true:null"></td>
              <td>{{address.province}} {{address.city}} {{address.district}} {{address.address}}</td>
              <td>{{address.name}}</td>
              <td>{{address.phoneNum}}</td>
              <td>
                <div *ngIf="address.isDefault">默认</div>
              </td>

            </tr>
            </tbody>
          </table>

          <button class="btn btn-success" (click)="onAuctionConfirmSubmit()" [attr.disabled]="selectedAddressIdx==null?true:null">确定</button>
          <button class="btn btn-default" (click)="auctionConfirmModal.hide()">取消</button>
          <button class="btn btn-warning" (click)="addOrModifyAddress()">添加/修改收货地址</button>

        </div>
      </div>
    </div>
  </div>
</div>


<div bsModal #payModal="bs-modal" class="modal fade" tabindex="-1" role="dialog"
     aria-labelledby="myLargeModalLabel"
     aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" (click)="payModal.hide()" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
        <h4 class="modal-title">支付</h4>
      </div>
      <div class="modal-body">
        <div>
          请汇款至<br/>
          xxxxxxxxxxxxxxx（中国银行卡，张xx）<br/>
          xxxxxxxxxxxxxxx（中国银行卡，李xx）<br/>
          汇款后请点击“已付款”，我会在x个工作日内确认打款，并在x个工作日内发货。
        </div>
        <button class="btn btn-success" (click)="onPaySubmit()">已付款</button>
        <button class="btn btn-worning" (click)="payModal.hide()">取消</button>
      </div>
    </div>
  </div>
</div>


<div bsModal #receiveConfirmModal="bs-modal" class="modal fade" tabindex="-1" role="dialog"
     aria-labelledby="myLargeModalLabel"
     aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" (click)="receiveConfirmModal.hide()" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
        <h4 class="modal-title">消息详情</h4>
      </div>
      <div class="modal-body">
        <div>
          收到货后确认无误请点击“确认收货”，如有疑问请联系我们：010-00000000
        </div>
        <button class="btn btn-success" (click)="onReceiveConfirmSubmit()">确认收货</button>
        <button class="btn btn-worning" (click)="receiveConfirmModal.hide()">取消</button>
      </div>
    </div>
  </div>
</div>

<div bsModal #orderDetailModal="bs-modal" class="modal fade" tabindex="-1" role="dialog"
     aria-labelledby="myLargeModalLabel"
     aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" (click)="orderDetailModal.hide()" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
        <h4 class="modal-title">订单详情</h4>
      </div>
      <div class="modal-body">
        <p>快递名称：{{selected&&selected.expressName}}</p>
        <p>运单号：{{selected&&selected.expressNo}}</p>
      </div>
    </div>
  </div>
</div>
